import React, { useState, useEffect } from "react";
import { ConfigProvider, Layout, Breadcrumb, Card, theme, Menu } from "antd";
import {
  HomeOutlined,
  WalletOutlined,
  SearchOutlined,
} from "@ant-design/icons";
import { Link, useNavigate } from "react-router-dom";
import RoutePage from "../router/RoutePage";
const BreadcrumbObj = {
  "#/": "标准术语搜索",
  "#/upDataPage": "文件上传和导出",
};

const items = [
  {
    label: "术语查询",
    key: "/",
    icon: <SearchOutlined />,
  },
  {
    label: "文件导入和导出",
    key: "/upDataPage",
    icon: <WalletOutlined />,
  },
];
export default function Page(props) {
  const name = BreadcrumbObj[window.location.hash];
  const navigate = useNavigate();

  const [current, setCurrent] = useState(
    window.location.hash.replace("#", "") || "#/"
  );
  const onClick = (e) => {
    navigate(e.key);
    setCurrent(e.key);
  };
  useEffect(() => {
    setCurrent(window.location.hash.replace("#", "") || "#/");
  }, []);
  // const routeElement = useRoutes(routes);
  return (
    <ConfigProvider>
      <Menu
        onClick={onClick}
        selectedKeys={[current]}
        mode="horizontal"
        items={items}
      />

      <Layout>
        <Breadcrumb style={{ marginTop: 15, marginLeft: 15 }} separator=">">
          <Breadcrumb.Item>
            <Link to="/" style={{ color: "#555" }}>
              <HomeOutlined />
              首页
            </Link>
          </Breadcrumb.Item>
          <Breadcrumb.Item>{name}</Breadcrumb.Item>
        </Breadcrumb>
        <Card style={{ margin: 10 }}>
          <RoutePage />
        </Card>
      </Layout>
    </ConfigProvider>
  );
}
